import React, { Component } from 'react';

import styled from 'styled-components'
import {connect} from 'react-redux'
import {bindActionCreators} from 'redux'
import {actionCreators} from './store'

import {Link} from 'react-router-dom'

const Item=(props)=>{
    return (
        <li>
            <Link
            to={{
                pathname:'/detail',
                search:`?goodstitle=${props.title}&goodsimg=${props.img}
                &nowprice=${props.nowprice}&delprice=${props.delprice}&id=${props.id}&jugement=${props.jugement}`
            }}
            >
                <div className='imgbox'>
                <img src={props.img} alt='显示不出来'></img>
                </div>
                <div>
                    <div className='title-box'>
                    {props.title}
                    </div>
                    <div className='price-box'>
                    <span className='tubiao'>￥</span><span className='now-price'>266</span>
                        <del>￥489</del>
                    </div>
                </div>
            </Link>
        </li>
    )
}
const ContainerHead=styled.div`
    background:#eee;
    ul{
        background:#fff
        display:flex;
        height:1.06rem;
        padding:.17rem 0;
        justify-content:space-around
        li{
            text-align:center;
            height:100%
            a{
                height:100%;
                display:block;
                font-size:14px;
                img{
                    width:.48rem
                }
                div{
                    padding-top:.075rem
                }
            }
        }
    }
    .deals-content-header{
        background:#fff
        margin-top:.07rem;
        text-align:center;
        font-size:14px;
        height:.44rem;
        line-height:.44rem
        .firstspan{
            padding-right:.05rem;
            margin-top:.1rem
        }
        span{
            img{
                width:.17rem
            }
        }
    }
`
const ListContainer=styled.div`
ul{
    li{
        height:1.25rem;
        padding:.12rem
        a{
            width:100%;
            display:flex;
            height:100%;
            
            img{
                width:1rem
            }
            .title-box{
                color:#333;
                height:.4rem;
                line-height:.2rem;
                font-size:14px;
            }
            .price-box{
                font-size: 13px;
                margin-top:.25rem;
                .tubiao{
                    color:#fe4070
                }
                .now-price{
                    font-size:18px;
                    color:#fe4070
                }
                del{
                    margin-left:.12rem
                    color:#999
                }
            }
        }
    }
}
`
class DutyFree extends Component {
    constructor(props) {
        super(props);
        this.state = {  };
    }
    componentDidMount() {
        this.props.get_duty_free()
    }
    render() {
        console.log('免费数据',this.props.dutyfreedata)
        return (
            <div>
                <ContainerHead>
                    <ul>
                        <li>
                            <a>
                                <img src='/img/logo512.png'></img>
                                <div>海外直供</div>
                            </a>
                        </li>
                        <li>
                            <a>
                                <img src='/img/genuine_guarantee.png'></img>
                                <div>原装正品</div>
                            </a>
                        </li>
                        <li>
                            <a>
                                <img src='/img/global_delivery.png'></img>
                                <div>极速到货</div>
                            </a>
                        </li>
                        <li>
                            <a>
                                <img src='/img/return_guarantee_7.png'></img>
                                <div>轻松退货</div>
                            </a>
                        </li>
                    </ul>
                    <div className='deals-content-header'>
                        <span className='firstspan'>
                            <img src='/img/icon_title.png'></img>
                        </span>
                        <span>今日团购，每天10点上新</span>
                    </div>
                </ContainerHead>
                <ListContainer>
                    <ul>
                        {this.props.dutyfreedata&&this.props.dutyfreedata.map(item=><Item {...item} key={item.id} />)}
                        {/* <li>
                            <a>
                                <div className='imgbox'>
                                    <img src='/img/1300610_1000_1000.jpg'></img>
                                </div>
                                <div>
                                    <div className='title-box'>
                                        兰蔻奇迹香氛30ml，每天都是全新开始。
                                    </div>
                                    <div className='price-box'>
                                        <span>￥266</span>
                                        <span>489</span>
                                    </div>
                                </div>
                            </a>
                        </li> */}
                        
                        
                    </ul>
                </ListContainer>
            </div>
        );
    }
}

export default connect(
    state=>state.dutyfree,
    dispatch=>bindActionCreators(actionCreators,dispatch)
)(DutyFree)